<template>
  <div class = 'type' ref = 'type'>
    <div class = 'serach' ref = 'search'>
      <Search :mess = "mess" ></Search>
    </div>
    <!-- <div>{{p}}-{{leftHeight}}-{{tabbar}}-{{leftNav}}</div>
    {{leftNav}} -->
    <!-- 分类页面 -->
    <van-tree-select
      :items="types"
      :active-id = "rightid"
      :main-active-index = 'activeIndex'
      height='563'
      @click-nav = 'leftfn' 
    >
      <template #content>
        <div ref = 'right'>
          <!-- <div v-for = '(item,index) in contentsright' :key = 'index' >
            <img :src="item.image" alt="">
            <h3>{{item.text}}</h3>
          </div> -->
          <van-grid gutter = '10' border = false center>
            <van-grid-item v-for="(value,index) in contentsright" :key="index" icon="photo-o" :text="value.text" />
          </van-grid>
        </div>
      </template>
    </van-tree-select>
    <div class = 'tabbar' ref = 'tabbar'>
        <TabBar></TabBar>
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'
import Search from '@/components/Search.vue'
import instance from '@/api/api';
export default {
  name: 'Typeview',

  data() {
    return {
      mess:"分类搜索",
      types:[],
      activeIndex: 0,    
      rightid:0,   //右侧选中的id
      contentsright:[],  //右侧的数据
      tabbar:0,
      leftHeight:0,
      p:0
      
    };
  },
  components:{
    TabBar,
    Search
  },

  mounted() {
    //  this.leftfn(1)
    
  },
  created(){
    this.getTypes()
    this.getaa()
   
  },
  computed:{
    leftNav(){
      return this.p - 50  - this.leftHeight
    }
  },

  methods: {
   async getTypes(){
     const {data} = await instance.get('/type');
     console.log(data)
     this.types = data
     this.contentsright = this.types[this.activeIndex].children
   }
   ,
   //点击左侧导航触发的事件
   leftfn(index){
     console.log(index)
     this.activeIndex = index
     this.contentsright = this.types[index].children

    var xx = document.getElementsByClassName('van-tree-select__content')
    xx[0].scrollTop = 0
    console.log(xx[0].scrollTop)

   },
   getaa(){
      this.$nextTick(function(){
       

      let bb  = this.$refs.search.offsetHeight

      let tabbar = this.$refs.tabbar
      let p = document.documentElement.clientHeight
      console.log(tabbar)
      this.p = p
      this.tabbar = tabbar;
      this.leftHeight = bb
     });

   }
  },
};
</script>

<style lang="less" scoped>
  .type{
    .van-sidebar::-webkit-scrollbar {
      display: none;
    }
    .van-tree-select__content::-webkit-scrollbar {
      display: none;
    }
    .van-tree-select__nav{
      flex:0.5;
      a{
        text-align:center;
      }
    }
  }
</style>